// 添加准备工作
// 1.1获取分类,渲染到下拉框的位置
$.ajax({
  url: '/my/category/list',
  success: function (res) {
    if (res.status === 0) {
      let str = ''
      res.data.forEach(item => {
        str += `
          <option value='${item.id}'>${item.name}</option>
        `
      });
      $('select[name=cate_id]').append(str)
      // 更新渲染
      let form = layui.form
      form.render()
    }
  }
})

// 1.2初始化富文本编辑器
initEditor()


// 1.3封面图片
// 找到图片
let image = $('#image')
// 剪切的配置项
let option = {
  aspectRatio: 400 /280,
  preview : '.img-preview'  //指定预览区的类名
}
image.cropper(option)

// 点击上传 选择照片
$('button:contains("选择封面")').on('click', function () {
  $('#file').trigger('click')
})

// 更换图片
$('#file').on('change', function () {
  // console.dir(this);   输出文件域的DOM对象
  if (this.files.length > 0) {
    let fileObj = this.files[0]
    // 转为URL作本地预览
    let url = URL.createObjectURL(fileObj)
    // console.log(url);  图片地址
    // 更换剪裁区图片
    // image.attr('src',url) 
    // image.cropper('方法名',方法的参数)
    image.cropper('replace',url)
  }
})

// 1.4 完成最终的添加文章
$('form').on('submit', function (e) {
  e.preventDefault()
  // 收集数据
  let fd = new FormData(this)
  // fd中content无数据 
  fd.set('content', tinyMCE.activeEditor.getContent())
  // 添加cover_img 剪裁图片 转化为blob 追加到fd
  let canvas = image.cropper('getCroppedCanvas', {
    width: 400,
    height: 280
  })
  canvas.toBlob(function (blob) {
    fd.append('cover_img', blob)
    // 检查一下，fd对象中，是否取得了接口要求的所有参赛
    // fd.forEach((val, key) => {
    //     console.log(key, val);
    // });
    // 发送ajax请求，完成最终的添加
    $.ajax({
      type: 'POST',
      url: '/my/article/add',
      data: fd,
      processData: false,  //不把对象形式的数据转化为字符串形式
      contentType : false, //不默认浏览器自行设置请求头
      success: function (res) {
        if (res.status === 0) {
          layer.msg(res.message)
          location.href = './list.html'
        }
      }
    })
  })
})